<template>
  <div class="continer">
    <div class="header">
      <div class="card" style="background-color: #f0ffff;">
        <div class="icons">
          <icons name="onlineStudents" className="icon-svg" style="color: #40c9c6"></icons>
        </div>
        <div class="text">
          <p>学员数</p>
          <p>{{ stuNum }}</p>
        </div>
      </div>
      <div class="card" style="background-color: #f0ffff;">
        <div class="icons">
          <icons name="jiaoshi" className="icon-svg" style="color: #40c9c6"></icons>
        </div>
        <div class="text">
          <p>教师数</p>
          <p>{{ teaNum }}</p>
        </div>
      </div>
      <div class="card" style="background-color: #f0ffff;">
        <div class="icons">
          <icons name="xinrenkecheng" className="icon-svg" style="color: #40c9c6"></icons>
        </div>
        <div class="text">
          <p>课程数</p>
          <p>{{ couNum }}</p>
        </div>
      </div>
      <div class="card" style="background-color: #f0ffff;">
        <div class="icons">
          <icons name="shouye" className="icon-svg" style="color: #40c9c6"></icons>
        </div>
        <div class="text">
          <p>订单数</p>
          <p>{{ ordNum }}</p>
        </div>
      </div>
    </div>
    <div class="body">
      <!-- <div class="body-left"></div>
      <div class="body-right"></div> -->
    </div>
  </div>
</template>
<script lang="ts">
import { querySteacherNum, queryCourseNum, queryOrderNum, queryStudentNum } from '@/api/public'
import { defineComponent, reactive, ref } from 'vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
  setup(props, { emit }) {
    const { proxy } = useCurrentInstance()
    const stuNum = ref(0)
    const teaNum = ref(0)
    const couNum = ref(0)
    const ordNum = ref(0)

    const getStudentNum = () => {
      queryStudentNum().then((res: any) => {
        stuNum.value = res.data
      })
    }
    getStudentNum()

    const getTeacherNum = () => {
      querySteacherNum().then((res: any) => {
        teaNum.value = res.data
      })
    }
    getTeacherNum()

    const getCourseNum = () => {
      queryCourseNum().then((res: any) => {
        couNum.value = res.data
      })
    }
    getCourseNum()

    const getOrderNum = () => {
      queryOrderNum().then((res: any) => {
        ordNum.value = res.data
      })
    }
    getOrderNum()

    return {
      stuNum,
      teaNum,
      couNum,
      ordNum
    }
  }
})
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  .card {
    width: 22%;
    height: 80%;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1);
    // display: flex;
    // flex-direction: row;
    // justify-content: center;
    // align-items: center;

    .icons {
      margin: auto;
      margin-top: 10%;
      width: 55%;
      height: 40%;
      background-color: azure;

      .icon-svg {
        width: 100%;
        height: 100%;
      }
    }

    .text {
      margin: auto;
      width: 40%;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      p {
        color: #8c8c8c;
        padding: 5px;
        font-size: 30px;
        font-weight: 700;
      }
    }
  }

  .card:hover {
    transform: scale(1.05);
    transition: transform 700ms;
  }
}

.body {
  width: 100%;
  padding: 20px;
  padding-top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .body-left {
    width: 59%;
    height: 100%;
    box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1);
  }

  .body-right {
    width: 39%;
    height: 100%;
    box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1);
  }
}
</style>
